<template>
  <div class="home">
    <!-- 轮播图 -->
    <div class="slideshow">
      <el-carousel trigger="hover" height="450px">
        <el-carousel-item v-for="item in imgs" :key="item.carousel_id">
          <img :src="'api' + item.imgPath" alt="" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 手机盒子 -->
    <div class="ipone">
      <div class="mobile">
        <p>手机</p>
      </div>
      <div class="bigbox">
        <img src="../assets/img/homepic/phone.png" height="100%" alt="" />
      </div>
      <homeshopli :list="cellphone"></homeshopli>
    </div>
    <!-- 家电盒子 -->
    <div class="ipone">
      <div class="appliances">
        <p>家电</p>
        <div class="myMenu">
          <ul>
            <li :class="applianceActive == 1 ? 'active' : ''" 
            @mouseover="applianceMouseOver($event,1)">热门</li>
            <li :class="applianceActive == 2 ? 'active' : ''" 
            @mouseover="applianceMouseOver($event,2)">电视影音</li>
          </ul>
        </div>
      </div>
      <div class="bigbox">
        <img src="../assets/img/homepic/appliance-promo1.png" alt="" class="mi1"/>
        <img src="../assets/img/homepic/appliance-promo2.png" alt="" class="mi2"/>
      </div>
      <homeshopli :list="applianceHotList"></homeshopli>
    </div>
    <!-- 配件 -->
    <div class="ipone">
      <div class="accessories">
        <p>配件</p>
        <div class="myMenu">
          <ul>
            <li :class="partsActive == 1 ? 'active' : ''"
              @mouseover="partsMouseOver($event, 1)">热门</li>
            <li :class="partsActive == 2 ? 'active' : ''"
              @mouseover="partsMouseOver($event, 2)">保护套</li>
            <li :class="partsActive == 3 ? 'active' : ''"
              @mouseover="partsMouseOver($event, 3)">充电器</li>
          </ul>
        </div>
      </div>
      <div class="bigbox">
        <img
          src="../assets/img/homepic/accessory-promo1.png"
          alt=""
          class="mi1"
        />
        <img
          src="../assets/img/homepic/accessory-promo2.png"
          alt=""
          class="mi2"
        />
      </div>
      <homeshopli :list="accessorieHotList"></homeshopli>
    </div>
  </div>
</template>

<script>
import slideshow from "../miAPI/slideshow";
export default {
  data() {
    return {
      imgs: [],
      applianceActive: 1,
      partsActive:1,
      // 手机的数据
      cellphone: null,
      // 家电热门数据
      applianceList: null,
      // 电视影音数据
      TVListData:null,
      // 配件热门数据
      accessories: null,
      // 保护壳
      protective:null,
      // 充电器
      charger:null,
      applianceHotList:null, //家电 渲染数据使用
      accessorieHotList:null, //配件 渲染数据使用
    };
  },
  methods: {
    // 获取轮播图的方法
    async getCarousel() {
      let { data: res } = await slideshow.getCarousel();
      this.imgs = res.carousel;
    },
    // 获取数据的方法
    async getShopList(dataName, data, flag) {
      if (flag) {
        // 热门
        var { data: res } = await slideshow.getHotProduct(data);
      } else {
        var { data: res } = await slideshow.getPromoProduct(data);
      }
      this[dataName] = res.Product;
    },
    applianceMouseOver(e, val) {//家电
      this.applianceActive = val;
    },
    partsMouseOver(e,val){//配件
      this.partsActive = val
    }
  },
  mounted() {
    // 获取轮播图数据
    this.getCarousel();
    // 获取手机数据
    this.getShopList("cellphone", { categoryName: "手机" });
    // 获取热门家电数据
    this.getShopList("applianceHotList",{ categoryName: ["电视机", "空调", "洗衣机"] },true);
    // 获取电视数据
    this.getShopList("TVListData",{categoryName:'电视机'})
    // 获取配件热门数据
    this.getShopList("accessorieHotList",{ categoryName: ["保护套", "保护膜", "充电器", "充电宝"] },true);
    // 获取保护壳数据
    this.getShopList('protective',{categoryName:'保护套'})
    // 获取充电器数据
    this.getShopList('charger',{categoryName:'充电器'})
  },
  watch: {
    applianceActive(val) {
      //当applianceActive发生改变的时候 会触发监听属性
      if (this.applianceList==null) {
        //如果刚开始applianceList没有内容 则证明没有点击过
        this.applianceList = this.applianceHotList;
      }
      this.applianceHotList = val === 1 ? this.applianceList : this.TVListData;
    },
    partsActive(val){
      // console.log(val)
      if(this.accessories == null){
        this.accessories = this.accessorieHotList
      }
      if(val === 1){
        this.accessorieHotList = this.accessories
      }else if (val === 2){
        this.accessorieHotList = this.protective
      }else{
        this.accessorieHotList = this.charger
      }
    }
  },
};
</script>

<style lang='scss'>
.home {
  width: 100%;
  background: #f5f5f5;
  // 轮播图的样式
  .slideshow {
    width: 100%;
    height: 490px;
    padding: 20px 8%;
    background: #fff;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .ipone {
    width: 100%;
    padding: 0 8%;
    display: flex;
    margin-top: 60px;
    padding-bottom: 30px;
    .mobile {
      position: absolute;
      left: 9%;
      top: 642px;
      p {
        font-size: 30px;
        width: 1000px;
      }
    }
    .appliances {
      position: absolute;
      left: 9%;
      top: 1333px;
      display: flex;
      justify-content: space-between;
      p {
        font-size: 30px;
        width: 900px;
      }
      .myMenu {
        ul {
          list-style: none;
          display: flex;
          padding-top: 30px;
        }
        li {
          margin-right: 20px;
          &.active,
          &:hover {
            color: #ff6700;
            border-bottom: 2px solid #ff6700;
          }
        }
      }
    }
    .accessories {
      position: absolute;
      left: 9%;
      top: 2030px;
      display: flex;
      justify-content: space-between;
      p {
        font-size: 30px;
        width: 900px;
      }
      .myMenu {
        ul {
          list-style: none;
          display: flex;
          padding-top: 30px;
        }
        li {
          margin-right: 20px;
          &.active,
          &:hover {
            color: #ff6700;
            border-bottom: 2px solid #ff6700;
          }
        }
      }
    }
    .bigbox {
      height: 615px;
      width: 234px;
      // background: red;
      -webkit-transition: 0.5s;
      img{
        cursor: pointer;
      }
      .mi1,
      .mi2 {
        width: 100%;
        height: 300px;
      }
      .mi1:hover,.mi2:hover{
        transform: translateY(-2px);
        transition: all 0.5s;
        box-shadow:0 10px 10px 4px rgb(221,221,221);
      }
      .mi2 {
        margin-top: 10px;
      }
    }
  }
}
</style>